import React from 'react'
import Flatpickr from "react-flatpickr";
import {Russian} from "flatpickr/dist/l10n/ru";
import "flatpickr/dist/flatpickr.min.css";
import "../../../../../../assets/scss/plugins/forms/flatpickr/flatpickr.scss"
import {parseUnixTime} from '../../../../../../helpers/utils'
import {Calendar, Clock} from "react-feather";

const DataAndTime = props => {
  const {date, disabled} = props
  const dateTime = date ? parseUnixTime(date) : ''

  return (
    <div className="tab-info__flatpickr-group">
      <div className="flatpickr-group">
        <Flatpickr
          value={new Date(dateTime)}
          options={{
            dateFormat: "d-m-Y",
            locale: Russian
          }}
          disabled={!!disabled}
          className={`release-content-list-item text-center tab-info-input no-click`}
        />
        <div className={`form-control-position flatpickr-group-icon`}>
          <Calendar size={16} />
        </div>
      </div>
      <div className="flatpickr-group">
        <Flatpickr
          options={{
            enableTime: true,
            noCalendar: true,
            dateFormat: "H:i",
            time_24hr: true,
          }}
          disabled={!!disabled}
          value={new Date(dateTime)}
          className={`release-content-list-item text-center tab-info-input no-click`}
        />
        <div className={`form-control-position flatpickr-group-icon`}>
          <Clock size={16} />
        </div>
      </div>
    </div>
  )
};

export default DataAndTime
